---
title: Hugoからの移行
description: HugoプロジェクトをAstroに移行するためのガイド
sidebar:
  label: Hugo
type: migration
stub: false
framework: Hugo
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Hugo](https://gohugo.io)は、Goで構築されたオープンソースの静的サイトジェネレーターです。

## HugoとAstroの類似点

HugoとAstroには、プロジェクト移行を容易にするいくつかの共通点があります。

- HugoもAstroも、静的サイトジェネレーターであり、[コンテンツ駆動](/ja/concepts/why-astro/#コンテンツ駆動)なウェブサイト―とくにドキュメントサイト―を構築するために最適化されています。
- どちらも[Markdownでコンテンツを作成](/ja/guides/markdown-content/)できます。HugoではYAML、TOML、JSONのいずれかでフロントマターを記述できます。AstroではYAMLとTOMLに対応しており、既存のMarkdownファイルやHugoのフロントマターの値をそのまま利用できます（ただしAstro側ではそれらに「特別な」意味は持たせていません）。
- HugoとAstroはいずれも、多様な[インテグレーションや外部パッケージ](https://astro.build/integrations/)を組み込んで拡張できます。

## HugoとAstroの主な相違点

- HugoはページテンプレートにGoテンプレートを使用しますが、Astroは[JSX風のHTML構文](/ja/basics/astro-components/)を使います。
- Astroは標準のMarkdownで動的コンテンツ向けにショートコードを使用しませんが、[MDXインテグレーション](/ja/guides/integrations-guide/mdx/)を追加すれば、JSXやコンポーネントのインポートが可能になります。
- Hugoでは"パーシャル"でレイアウトの再利用を行いますが、Astroは完全に[コンポーネントベース](/ja/basics/astro-components/)です。`.astro`ファイルはコンポーネント、レイアウト、ページのいずれとしても使用可能で、他のAstroコンポーネントや[UIフレームワークのコンポーネント](/ja/guides/framework-components/)、[MarkdownやMDXファイル](/ja/guides/imports/)のメタデータやコンテンツも読み込めます。

## HugoサイトをAstroに変換する

HugoブログをAstroへ移行するには、まず[公式ブログテーマスターター](https://astro.build/themes/blog/)を使うか、[テーマショーケース](https://astro.build/themes/)でコミュニティ製テーマを探してください。

`create astro`コマンドに`--template`を渡すと、公式スターターで新しいAstroプロジェクトを作成できます。また、[GitHub上の既存Astroリポジトリから新規プロジェクトを開始](/ja/install-and-setup/)することも可能です。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm create astro@latest -- --template blog
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm create astro@latest --template blog
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn create astro --template blog
  ```
  </Fragment>
</PackageManagerTabs>

Markdown（またはMDX）ファイルは、[AstroのMarkdown/MDXページ](/ja/guides/markdown-content/)として再利用できます。AstroはYAMLとTOMLのフロントマターをサポートしていますが、**JSONのフロントマターを使用している場合は変換が必要です**。

Markdownファイル内で変数や表現、UIコンポーネントなど動的コンテンツを使用するには、AstroのMDXインテグレーションを追加して[MDXページ](/ja/guides/markdown-content/)へ変換してください。MDXはYAMLとTOMLのフロントマターをサポートしており、ショートコード構文は[MDX構文](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax)に置き換える必要があります（JSX表現やコンポーネントのインポートなど）。

ポートフォリオサイトやドキュメントサイトなど別のタイプのサイトを移行したい場合は、[astro.new](https://astro.new)で他の公式スターターテンプレートを参照してください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodで開発環境をすぐに立ち上げるためのリンクも用意されています。

## コミュニティリソース

<CardGrid>
  <LinkCard title="Elio StruyfによるHugoからAstroへの移行ストーリー" href="https://www.eliostruyf.com/migration-story-hugo-astro/" />
  <LinkCard title="HugoとAstroの比較（2023年版）" href="https://onebite.dev/hugo-vs-astro-which-static-site-generator-to-choose-in-2023/" />
  <LinkCard title="AI支援によるAstroへの移行の教訓" href="https://bennet.org/blog/lessons-from-ai-assisted-migration-to-astro/" />
</CardGrid>

:::note[共有したいリソースがありますか？]
HugoサイトのAstroへの変換に役立つ動画やブログ記事を見つけた（または作成した）場合は、[こちらのリストに追加してください](https://github.com/withastro/docs/edit/main/src/content/docs/ja/guides/migrate-to-astro/from-hugo.mdx)！
:::
